{include file="public/head"}
<link rel="stylesheet" href="__STATIC__/User/css/index.css">
<link rel="stylesheet" href="__STATIC__/User/css/car.css">
<link rel="stylesheet" href="__STATIC__/User/css/common.css">
<link rel="stylesheet" href="__STATIC__/User/css/iconfont.css">
<style>
    body {
        background-color: #FAF7FA;
        padding-bottom: 2.1rem;
    }
</style>


<body>
<div class="header" style="background: #ECECEC">
    <a class="h-back" href="javascript:history.back(-1)">
<!--        <img src="__STATIC__/User/img/back.png" alt="">-->
    </a>
    <h1 style="color: black">购物车</h1>
    <!-- <a class="h-right">
        <i class="iconfont">&#xe686;</i>
    </a> -->
</div>

<div class="have-car" style="margin-bottom: 3rem">
    <div class="bgc">
        <div class="bgc-left ">共{$CartCount}件宝贝</div>
        <div class="bgc-right" id="car-edit" data-flag=true>编辑</div>
    </div>
    <div class="car_box">
        {volist name="CartList" id="cv"}
        <div class="car-goods-item">
            <div class="item-check product-ckb">
                <em class="product-em" value="{$cv.id}" goods_id="{$cv.goods_id}"></em>
            </div>
            <div class="car-goods-img">
                <img src="{$cv.goods_info.logo_url}" alt="">
            </div>
            <div class="car-goods-msg">
                <h6>{$cv.goods_info.name}</h6>
                <div class="car-goods-sku">
                    {$cv.goods_info.introduction}
                </div>
                <div class="car-goods-price">
                    <div class="car-goods-price-left" data-discounts="20">
                        ￥<span>{$cv.goods_info.price}</span>
                    </div>
                    <div class="car-goods-amount">
                        <div class="amount-jian">-</div>
                        <div class="amount_num">{$cv.num}</div>
                        <div class="amount-jia">+</div>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>
    <div class=" car-js1">
        <div class="car-js-box">

            <div class="car-js-al product-al">
                <div class="product-all">
                    <em class=""></em>
                </div>
                <span>全选</span>
            </div>
            <div class="car-center">
                <div class="car-al-price">
                    总计:<span>￥0.00</span>
                </div>
<!--                <div class="car-you">-->
<!--                    优惠:￥0.00-->
<!--                </div>-->
            </div>
            <div class="car-js product-all-sl">
                结算
            </div>
        </div>

    </div>
    <div class="car-del1">
        <div class="car-del-box">
            <div class="car-js-al product-al">
                <div class="product-all">
                    <em class=""></em>
                </div>
                <span>全选</span>
            </div>
            <!-- <div class="del-collect">加入收藏夹</div> -->
            <div class="del-btn">
                删除
            </div>
        </div>

    </div>
</div>
{if condition="$CartList eq null"}
<div class="no-car">
    <img src="__STATIC__/User/img/ch.png" alt="">
    <p>购物车是空白的哦</p>
</div>
{/if}
<!-- 猜你喜欢 -->


<div class="shadow1">
    <div class="del_box">
        <p>确认要删除这<span class="del2">0</span>件商品</p>
        <div class="btn_box">
            <button class="btn1 cancel">取消</button>
            <button class="btn2 product-del">确定</button>
        </div>
    </div>
</div>

<div class="shadow2">
    <div class="del_box">
        <p>确认要加入收藏夹</p>
        <div class="btn_box">
            <button class="btn1 cancel">取消</button>
            <button class="btn2 product-collect">确定</button>
        </div>
    </div>
</div>


<footer class="aui-footer-default aui-footer-fixed">
    <a href="{:url('Index/App')}" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span>
        <span class="aui-footer-item-text">首页</span>
    </a>
    <a href="{:url('Index/Index')}" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>
        <span class="aui-footer-item-text">商城</span>
    </a>
    <a href="{:url('Index/pin')}" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>
        <span class="aui-footer-item-text">拼团</span>
    </a>
<!--    <a href="{:url('Goods/ClassList')}" class="aui-footer-item">-->
<!--        <span class="aui-footer-item-icon aui-icon aui-footer-icon-class"></span>-->
<!--        <span class="aui-footer-item-text">分类</span>-->
<!--    </a>-->
    <a href="{:url('Order/UserCart')}" class="aui-footer-item aui-footer-active">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>
        <span class="aui-footer-item-text">购物车</span>
    </a>
<!--    <a href="{:url('Order/OrderList')}" class="aui-footer-item">-->
<!--        <span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>-->
<!--        <span class="aui-footer-item-text">订单</span>-->
<!--    </a>-->
    <a href="{:url('User/Index')}" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span>
        <span class="aui-footer-item-text">我的</span>
    </a>
</footer>
</body>
<script src="__STATIC__/User/js/jquery.min.js"></script>
<script src="__STATIC__/User/js/aui.js"></script>
<script src="__STATIC__/User/js/aui-down.js"></script>
<script type="text/javascript" src="__STATIC__/Admin/layer/layer.js"></script>
<script>
    IsNoCart();


    //购物车是否为空
    function IsNoCart(){
        $(".have-car").hide();
        $(".no-car").show();
        var GoodsCount = $(".car-goods-item").length;   //购物车商品数量
        if(GoodsCount > 0){
            $(".have-car").show();
            $(".no-car").hide();
        }
    }


    //购物车编辑
    $('#car-edit').click(function () {
        let flag = $(this).attr('data-flag')
        $(this).text(flag == 'true' ? '完成' : '编辑')
        if (flag == 'true') {   //编辑中
            $('.car-del1').show();  //显示收藏/删除按钮
            $('.car-js1').hide();   //隐藏结算内容
            $(this).attr('data-flag', false)
        } else {    //编辑完成
            $('.car-js1').show();    //显示结算内容
            $('.car-del1').hide();  //隐藏收藏/删除按钮
            $(this).attr('data-flag', true)
        }
    })

    //点击收藏事件
    $('.del-collect').click(function () {
        let cd = $(".product-xz").length;   //商品选中数量
        if (cd <= 0) {
            layer.msg('请至少勾选一样商品')
            return false
        }

        $('.shadow2').fadeIn(); //淡入效果来显示确认收藏提示
        $('.shadow1').hide();   //隐藏删除提示
    })

    //点击删除事件
    $('.del-btn').click(function () {
        let cd = $(".product-xz").length;   //商品选中数量
        if (cd <= 0) {
            layer.msg('请至少勾选一样商品')
            return false
        }
        $('.del2').text(cd)
        $('.shadow1').fadeIn(); //淡入效果来显示确认删除提示
        $('.shadow2').hide();  //隐藏收藏提示
    })

    //收藏/删除提示的取消按钮点击事件
    $('.cancel').click(function () {
        $('.shadow1').fadeOut();    //淡出效果来隐藏确认删除提示
        $('.shadow2').fadeOut();    //淡出效果来隐藏确认收藏提示
    })


    $(function () {
        //确定删除按钮
        $(".product-del").click(function () {
            let cd = $(".product-xz");  //已选中的产品
            var cart_id_array = new Array(); //定义选中购物车ID数组
            $(cd).each(function (i,v) {
                cart_id_array.push($(this).attr('value'));
            });

            //删除购物车记录
            $.ajax({
                type:"post",
                url:"{:url('Order/DelCart')}",
                data:{
                    cart_id_array:cart_id_array,
                },
                dataType:"json",
                success:function(data){
                    layer.msg(data.message);
                    if(data.status == 1){
                        $(cd).parent().parent('.car-goods-item').remove();
                        $('.shadow1').fadeOut();    //淡出效果来隐藏确认删除提示
                        $('.shadow2').fadeOut();    //淡出效果来隐藏确认收藏提示
                        IsNoCart();
                        TotalPrice();
                        layer.msg(data.message);
                    }else if(data.status == 0){
                        layer.msg(data.message);
                    }
                }
            });
            shuliang();
        });

        //确定收藏按钮
        $(".product-collect").click(function () {
            let cd = $(".product-xz");  //已选中的产品
            var cart_id_array = new Array(); //定义选中购物车ID数组
            $(cd).each(function (i,v) {
                cart_id_array.push($(this).attr('value'));
            });

            //收藏购物车记录
            $.ajax({
                type:"post",
                url:"{:url('Order/CollectCart')}",
                data:{
                    cart_id_array:cart_id_array,
                },
                dataType:"json",
                success:function(data){
                    layer.msg(data.message);
                    if(data.status == 1){
                        $('.shadow1').fadeOut();    //淡出效果来隐藏确认删除提示
                        $('.shadow2').fadeOut();    //淡出效果来隐藏确认收藏提示
                        layer.msg(data.message);
                    }else if(data.status == 0){
                        layer.msg(data.message);
                    }
                }
            });
        })



        //加的效果
        $(".amount-jia").click(function () {
            var n = $(this).prev().html();
            var num = parseInt(n) + 1;
            if (num == 99) { return; }
            $(this).prev().html(num);
            TotalPrice();   //计算总价
        });

        //减的效果
        $(".amount-jian").click(function () {
            var n = $(this).next().html();
            var num = parseInt(n) - 1;
            if (num == 0) { return; }
            $(this).next().html(num);
            TotalPrice();   //计算总价
        });

        //复选按钮点击事件
        $(".product-ckb").click(function () {
            $(this).children("em").toggleClass("product-xz");
            TotalPrice();
            productxz();
        });
        //全选产品
        $(".product-al").click(function () {
            var fxk = $(".product-em");
            var qx = $(".product-all em");
            qx.toggleClass("product-all-on");
            if ($(this).find(".product-all em").is(".product-all-on")) {
                fxk.addClass("product-xz");
            } else {
                fxk.removeClass("product-xz");
            }
            TotalPrice();
            shuliang()
        });

        TotalPrice();
        shuliang();
        koncat();
    });
    //选中产品
    function productxz() {
        var xz = $(".product-em");
        var xz1 = $(".product-xz");
        if (xz1.length == xz.length) {
            $(".product-all em").addClass("product-all-on");
        } else {
            $(".product-all em").removeClass("product-all-on");
        }
        shuliang();
        TotalPrice();
    }
    //计算产品价格
    function TotalPrice() {
        //总价
        var total = 0;
        var allcount = 0
        $(".product-em").each(function () {
            if ($(this).is(".product-xz")) {
                var price = parseFloat($(this).parents(".product-ckb").siblings('.car-goods-msg').children('.car-goods-price').find('.car-goods-price-left span').text());//得到产品单价
                var slproice = parseInt($(this).parents(".product-ckb").siblings('.car-goods-msg').children('.car-goods-price').find('.car-goods-amount .amount_num').text());//得到产品数量
                var discounts = parseFloat($(this).parents(".product-ckb").siblings('.car-goods-msg').children('.car-goods-price').find('.car-goods-price-left').attr('data-discounts'));
                var dgtotal = price * slproice;
                total += dgtotal;
                allcount += discounts
            }
            $(".car-al-price span").text(`￥${total.toFixed(2)}`); //输出全部总价
            $('.car-you').html(`优惠:￥${allcount}`)
        });

    }
    //获取选择产品数量
    function shuliang() {
        $(".product-all-sl").text("");
        var cd = $(".product-xz").length;
        if (cd > 0) {
            $(".product-all-sl").text(`结算(${cd})`);
            $(".all-sl").css("display", "inline-block");
            $(".product-sett").removeClass("product-sett-a");
        } else {
            $(".product-all-sl").text(`结算`);
            $(".all-sl").css("display", "none");
            $(".product-sett").addClass("product-sett-a");
        }
    }


    //购物车空为空
    function koncat() {
        var pic = $(".car-goods-item").length;
        if (pic <= 0) {
            $('.car-js1').hide()
            $('.car-del1').hide()
        } else {
        }
    }

    //结算按钮
    $('.product-all-sl').click(function () {
        var cd = $(".product-xz").length;
        if (cd > 0) {
            let goods_ids = new Array();   //定义属性ID数组
            $('.product-xz').each(function (ai, av) {
                goods_ids.push($(this).attr('goods_id'));   //属性ID
            });
            let num = new Array();  //定义操作数量数组
            $('.amount_num').each(function (ni, nv) {
                num.push($(this).text());   //操作数量
            });
            let goods_id = goods_ids.join(",");
            let NumStr = num.join(",");
            let pt_id = '{$pt_id}';

            //点击结算的时候  将数量在购物车中更新
            $.ajax({
                type:"post",
                url:"{:url('Order/upche')}",
                data:{
                    NumStr:NumStr,
                },
                dataType:"json",
                success:function(data){
                    if(data.status == 1){
                        window.location.href = "/index.php/Order/OrderFound_1/goods_id/"+goods_ids+"/pt_id/"+pt_id;
                    }
                }
            });

            // window.location.href = "/index.php/Order/OrderFound/goods_id/"+goods_ids+"/NumStr/"+NumStr+"/pt_id/"+pt_id;
        } else {
            layer.msg('请至少勾选一样商品')
        }
    })

    $('.del-btn').click(function () {
        var cd = $(".product-xz").length;
        if (cd > 0) {

        } else {
            layer.msg('请至少勾选一样商品')
        }
    })
</script>

</html>